搭配後端 - Laravel分為三篇

• 上篇介紹 環境建置
• 中篇介紹 Vue檔案結構
• 下篇介紹 編譯流程跟設定

Laravel assets 編譯

有在寫Sass、需要編譯js的前端工程師，應該都聽過或用過 Gulp & Webpack。

但後端就不一定了，Laravel怎麼處理這個狀況？

Laravel Elixir (將改名為 Laravel Mix)

這時需要中間層!
Laravel Elixir將Gulp包裝，簡化工具門檻!
讓php工程師使用簡單語法，呼叫內建Gulp編譯流程。

本質上還是Gulp!
所以熟悉的話，gulpfile設定檔可用原本習慣寫。
(些許差異先不提，有興趣可留言)

ps. 跟另一個語言 - elixir-lang 同名，之後會改名為 Laravel Mix (官方消息)。

Elixir 如何編譯 Vue

Elixir編譯流程寫在Gulp設定檔 - gulpfile.js
預設做了哪些事？

/* 載入 Elixir */
const elixir = require('laravel-elixir');

/* 載入編譯 vue 2.x 需要的 webpack loader */
require('laravel-elixir-vue-2');

/* 定義編譯流程 */
elixir(mix => {
    mix.sass('app.scss')   /* 編譯Sass */
       .webpack('app.js'); /* 編譯js */
});

編譯後，將檔案存在/public下

└── VueSite/public
    └── js
        ├── css
        |	  └── app.css
        └── js
         	  └── app.js

(可自行對照前一篇resources/assets/檔案結構)

簡單吧？

還沒完

Elixir 已包裝 Webpack 編譯流程，若流程得做些微調，該怎麼辦呢？

自訂 Webpack 編譯流程

Elixir 雖有套預設流程，只要有自定的 Webpack 設定檔(預設叫webpack.config.js)，會照自訂設定檔執行Webpack。

但這時後端就不能偷懶了，請閱讀文件，了解設定檔怎麼寫。

自訂Gulp流程也一樣，請閱讀Gulp Plugin文件。